<template>
    <div class='page-container'>
        <div class="page-content">
            <div v-for="(item, index) in items" :key="index" :style="{
                left: item.left + 'px',
                bottom: item.bottom + 'px',
                width: item.width + 'px',
                height: item.height + 'px',
                transition: 'left 0.5s ease', /* 添加横向移动的过渡效果 */
                position: 'absolute'
            }" @click="moveBox(index)">
                <div :class="item.imageContainerClass">
                    <img :src="item.icon" alt="图标" class="box-image" />
                </div>
                <div class="box-text">{{ item.text }}</div>
            </div>
        </div>
    </div>
</template>


<script setup>
import { reactive } from 'vue';

// 初始化盒子的位置和大小
const items = reactive([
    {
        imageContainerClass: 'image-container',
        icon: '/src/assets/images/Shape_1.png',
        text: '全部',
        left: 398.5,
        bottom: 40,
        width: 64,
        height: 64
    },
    {
        imageContainerClass: 'image-container',
        icon: '/src/assets/images/Shape_2.png',
        text: '自然保护区',
        left: 542.5,
        bottom: 55,
        width: 64,
        height: 64
    },
    {
        imageContainerClass: 'image-containerbig',
        icon: '/src/assets/images/Shape_3.png',
        text: '水流',
        left: 686,
        bottom: 55,
        width: 96,
        height: 110
    },
    {
        imageContainerClass: 'image-container',
        icon: '/src/assets/images/Shape_4.png',
        text: '国有林场',
        left: 835.0,
        bottom: 55,
        width: 64,
        height: 64
    },
    {
        imageContainerClass: 'image-container',
        icon: '/src/assets/images/Shape_5.png',
        text: '矿产',
        left: 990.5,
        bottom: 40,
        width: 64,
        height: 64
    }
]);

const moveBox = (index) => {
    // 交换逻辑
    switch (index) {
        case 0:
            // 点击第一个盒子，顺序不变
            break;
        case 1:
            // 点击第二个盒子，顺序变为04123
            [items[1], items[2], items[3], items[4]] = [items[2], items[3], items[4], items[1]];
            [items[1].imageContainerClass, items[2].imageContainerClass, items[3].imageContainerClass, items[4].imageContainerClass] =
                [items[2].imageContainerClass, items[3].imageContainerClass, items[4].imageContainerClass, items[1].imageContainerClass];
            // 交换 left, bottom, width 和 height 属性
            [items[1].left, items[2].left, items[3].left, items[4].left] =
                [items[2].left, items[3].left, items[4].left, items[1].left];
            [items[1].bottom, items[2].bottom, items[3].bottom, items[4].bottom] =
                [items[2].bottom, items[3].bottom, items[4].bottom, items[1].bottom];
            [items[1].width, items[2].width, items[3].width, items[4].width] =
                [items[2].width, items[3].width, items[4].width, items[1].width];
            [items[1].height, items[2].height, items[3].height, items[4].height] =
                [items[2].height, items[3].height, items[4].height, items[1].height];
            break;
        case 2:
            // 点击第三个盒子，顺序变为 01234
            [items[1], items[2]] = [items[2], items[1]];
            [items[1].imageContainerClass, items[2].imageContainerClass] = [items[2].imageContainerClass, items[1].imageContainerClass];
            // 交换 left, bottom, width 和 height 属性
            [items[1].left, items[2].left] = [items[2].left, items[1].left];
            [items[1].bottom, items[2].bottom] = [items[2].bottom, items[1].bottom];
            [items[1].width, items[2].width] = [items[2].width, items[1].width];
            [items[1].height, items[2].height] = [items[2].height, items[1].height];
            break;
        case 3:
            // 点击第四个盒子，顺序变为02341
            [items[1], items[2]] = [items[2], items[1]];
            [items[2], items[4]] = [items[4], items[2]];
            [items[1].imageContainerClass, items[2].imageContainerClass] = [items[2].imageContainerClass, items[1].imageContainerClass];
            [items[2].imageContainerClass, items[4].imageContainerClass] = [items[4].imageContainerClass, items[2].imageContainerClass];
            // 交换 left, bottom, width 和 height 属性
            [items[1].left, items[2].left] = [items[2].left, items[1].left];
            [items[1].bottom, items[2].bottom] = [items[2].bottom, items[1].bottom];
            [items[1].width, items[2].width] = [items[2].width, items[1].width];
            [items[1].height, items[2].height] = [items[2].height, items[1].height];
            [items[2].left, items[4].left] = [items[4].left, items[2].left];
            [items[2].bottom, items[4].bottom] = [items[4].bottom, items[2].bottom];
            [items[2].width, items[4].width] = [items[4].width, items[2].width];
            [items[2].height, items[4].height] = [items[4].height, items[2].height];
            break;
        case 4:
            // 点击第五个盒子，顺序变为 03412
            [items[1], items[3]] = [items[3], items[1]];
            [items[1].imageContainerClass, items[3].imageContainerClass] = [items[3].imageContainerClass, items[1].imageContainerClass];
            // 交换 left, bottom, width 和 height 属性
            [items[1].left, items[3].left] = [items[3].left, items[1].left];
            [items[1].bottom, items[3].bottom] = [items[3].bottom, items[1].bottom];
            [items[1].width, items[3].width] = [items[3].width, items[1].width];
            [items[1].height, items[3].height] = [items[3].height, items[1].height];
            break;
    }
};


</script>

<style lang='scss' scoped>
.page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.page-content {
    width: 1469px;
    height: 84px;
    position: relative;
}

.image-containerbig {
    width: 94px;
    height: 92px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-image: url('../../assets/image/icon/Bitmapbig.png');
    border-radius: 4px;
}

.image-container {
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-image: url('../../assets/image/icon/Bitmap.png');
    border-radius: 4px;

    .box-image {
        width: 32px;
        height: 32px;
    }
}

.box-text {
    width: 80px;
    height: 16px;
    font-size: 16px;
    font-family: '江城斜黑体', '江城斜黑体-Bold';
    font-weight: Bold;
    text-align: center;
    color: #ffffff;
    line-height: 24px;
    text-shadow: 0px 1px 3px 0px rgba(255, 255, 255, 0.80) inset;
}
</style>
